<html>
<head>
  <style>
  
    popup#test
    {
      background-color: gold;
      border:1px solid red;
      width:100px;
      height:100px;
      cursor:pointer;
      border-radius: 6px; 
      box-shadow: 0px 1px 5px #888;
      margin:3px; // here it is offset of the popup from anchor
    }
    
    div#anchor
    {
      border:1px solid blue;
      width:50px;
      height:50px;
      cursor:pointer;
    }

    popup#test > div {
      background:red; size:30px;
    }
    popup#test > div:hover {
      background:blue;
    }

  </style>  
  <script>
    
      document.on("mousedown", "div#anchor", function(evt,anchor)
      {
        if(!anchor.state.ownspopup) {
          var anchorReferencePoint = document.$("select#anchor-point").value;
          var popupReferencePoint = document.$("select#popup-point").value;
          anchor.popup(document.$("popup#test"),{
            anchorAt: anchorReferencePoint,
            popupAt: popupReferencePoint,
          });
        }
      });
      
      // close popup on mouseup inside it
      document.on("^mouseup", "popup", function(evt,popup) {
        popup.state.popup = false;
      })
      
      
    </script>
  
</head>
<body>

   popup point (see num keypad):
   <select #popup-point>
     <option value=1>1 - left/bottom</option>   
     <option value=2>2 - middle/bottom</option>   
     <option value=3>3 - right/bottom</option>   
     <option value=4>4 - left/middle</option>   
     <option value=5>5 - middle/middle</option>   
     <option value=6>6 - right/middle</option>   
     <option value=7>7 - left/top</option>   
     <option value=8 selected>8 - middle/top</option>   
     <option value=9>9 - right/top</option>   
   </select> is on anchor point:
   <select #anchor-point>
     <option value=1>1 - left/bottom</option>   
     <option value=2 selected>2 - middle/bottom</option>   
     <option value=3>3 - right/bottom</option>   
     <option value=4>4 - left/middle</option>   
     <option value=5>5 - middle/middle</option>   
     <option value=6>6 - right/middle</option>   
     <option value=7>7 - left/top</option>   
     <option value=8>8 - middle/top</option>   
     <option value=9>9 - right/top</option>   
   </select>
   <p>Choose position above and click on the anchor:</p>
    <div#anchor> 
      anchor
    </div>
    <popup #test>
      popup
      <div></div>
    </popup>
    

</body>
</html>